<template>
    <div class="table" :style="customStyle">
        <el-table :data="data">
            <template v-for="column in columns" :key="column.prop">
                <ColumnItem :column="column">
                    <template v-for="(_, name) in $slots" #[name]="scope">
                        <slot :name="name" v-bind="scope" />
                    </template>
                </ColumnItem>
            </template>
        </el-table>
    </div>
    <div class="page" v-if="isPage">
        <el-pagination style="margin-top: 5px;" v-model:current-page="compPage.page"
            v-model:page-size="compPage.pagesize" layout="sizes,total, prev, pager, next, jumper"
            :total="compPage.total" @current-change="handleChangeCurrent" @size-change="handleChangeSize" />
    </div>
</template>
<script setup>
import ColumnItem from './columnItem.vue'
const props = defineProps({
    columns: {
        type: Array,
        default: () => [
            {
                label: '姓名',
                prop: 'name'
            },
            {
                label: '年龄',
                prop: 'age'
            },
            {
                label: '性别',
                prop: 'gender'
            }
        ]
    },
    data: {
        type: Array,
        default: () => [
            { name: '张三', age: 20, gender: '男' },
            { name: '李四', age: 21, gender: '女' },
            { name: '王五', age: 22, gender: '男' }
        ]
    },
    height: {
        type: String,
        default: '100px'
    },
    // 是否显示分页器
    isPage: {
        type: Boolean,
        default: true
    },
    page: {
        type: Object,
        default: () => {
            return {
                pagesize: 50,
                page: 1,
                total: 10
            };
        }
    },
})

const customStyle = computed(() => {
    return {
        height: `calc(100vh - ${props.height})`
    };
});

const emit = defineEmits(['change']);
const compPage = computed(() => {
    return Object.assign({ pagesize: 10, page: 1, total: 10 }, props.page);
});
const handleChangeCurrent = (val) => {
    compPage.value.page = val;
    emit('change', compPage.value);
};
const handleChangeSize = (val) => {
    compPage.value.pagesize = val;
    emit('change', compPage.value);
};
</script>
<style lang="scss" scoped>
.table {}

.page {
    margin-top: 5px;
}
</style>